// pages/view/dean/allStaffBusiness/allStaffBusiness.js
import * as echarts from '../../../../ec-canvas/echarts';
const network = require('../../../../utils/network.js')
const app = getApp();

let chart = null;

var bedUse_value = 0;//床位使用率
var clDrug_value = 0;//门诊药品收入
var clMedical_val = 0;//门诊医疗收入
var ipDrug_value = 0;//住院药品收入
var ipMedical_val = 0;//住院医疗收入
/**
 * 绘制床位使用率图表参数
 */
function initGauge(canvas, width, height) {
  console.log("initGauge被执行了", canvas)
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option ={
    backgroundColor: "#ffffff",
    color: ["#37A2DA", "#32C5E9", "#67E0E3"],

    series: [{
      name: '床位使用率',
      type: 'gauge',
      detail: {
        formatter: '{value}%',
        fontSize: 16,
        color: '#3259B8'
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 30,
          shadowBlur: 0,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      data: [{
        value: bedUse_value,
        name: '使用率',
      }]

    }]
  };
  chart.setOption(option);
  return chart;
}
/**
 * 绘制结算收入图表参数
 */
function initBar(canvas, width, height) {
  console.log("initBar被执行了", canvas)
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
 
  var option = {
    color: ['#37a2da', '#32c5e9'],
    
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: ['药品', '医疗']
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 15,
      top: 40,
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666'
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: ['门诊结算收入', '住院结算收入'],
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666'
        }
      }
    ],
    series: [
      {
        name: '药品',
        type: 'bar',
        stack: '总量',
        label: {
          normal: {
            show: true
          }
        },
        data: [clDrug_value, ipDrug_value]
      },
      {
        name: '医疗',
        type: 'bar',
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'right'
          }
        },
        data: [clMedical_val, ipMedical_val]

      }
    ]
  };
  chart.setOption(option);
  return chart;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    allStaffBusiness:{
      cl_gopTimes: 0,//急诊总人数
      cl_erTimes: 0,//门诊总人数
      cl_totalTimes: 0,//门急诊总人数


      cl_recipeTotalFee: 0,//处方总金额=门诊结算总收入
      cl_times: 0,//有效处方数
      cl_perAmount: 0,//人均处方金额

      cl_totalFee: 0,//门诊结算总收入
      cl_drugFee: 0,//门诊药品结算总收入
      cl_drugInTotal: '',//药品占总收入比例 ,为了加上百分号，设置String类型

      ip_inTimes: 0,//入院人数
      ip_existTimes: 0,//在院人数
      ip_outTimes: 0,//出院人数


      ip_totalBed: 0,//额定床位
      ip_useBed: 0,//使用床位
      bed_useProportion: '',//为了加上百分号，设置String类型

      ip_totalFee: 0,//住院结算总收入
      ip_drugFee: 0,//住院药品结算收入
      ip_drugInTotal: '',//住院：药品占住院总收入

      all_totalFee: 0,//全院结算总收入
      all_drugFee: 0,//全院药品结算收入
      all_drugInTotal: ''//药品收入占全院收入比例
    },
   
    //  bedUse_value : 0,//床位使用率
    //  clDrug_value : 0,//门诊药品收入
    //  clMedical_val : 0,//门诊医疗收入
    //  ipDrug_value : 0,//住院药品收入
    //  ipMedical_val : 0,//住院医疗收入

    ecGauge:{
      //lazyLoad: true
    },
    ecBar: {
      //onInit: initBar
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    wx.showLoading({
      title: '加载中',
    })
    that.myRequest(options)

  },
  myRequest: function (options){
    var that = this;
    //调用封装好的网络请求，获取数据
    network.get('/dean/business', {}
    ).then(function (res) {

      console.log('res:', res)
      var obj = res.data.data
      var bed_use_proportion = res.data.data.bed_useProportion
      bedUse_value = bed_use_proportion
      clDrug_value = obj.cl_drugFee
      clMedical_val = obj.cl_totalFee - obj.cl_drugFee
      ipDrug_value = obj.ip_drugFee
      ipMedical_val = obj.ip_totalFee - obj.ip_drugFee
      that.setData({
        allStaffBusiness: obj,

      })

    }).then(function (res) {
      wx.hideLoading();
      //that.initGauge();
      that.setData({
        ecGauge: {
          onInit: initGauge
        },
        ecBar: {
          onInit: initBar
        }
      })
      // that.initBar();
    }).catch(function (res) {
      console.log(res)
    })
  },

  // 点击按钮后初始化图表
  initGauge: function () {
    this.ecComponent.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setGaugeOption(chart);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;

      // this.setData({
      //   isLoaded: true,
      //   isDisposed: false
      // });

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });

   

  },
  initBar: function () {
    this.ecComponent.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setBarOption(chart);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

})

